<template>
    <div class="mask" v-if="maskShow&&total.count>0" @click="handleShow"></div>
    <div class="cartList" v-if="cartListShow&&total.count>0">
        <div class="product">
            <div class="checkAll">
                <div class="checkAll_box" @click="handleCheckAll(shopId,checkAll)">
                    <span
                        :class="['iconfont', checkAll ? 'icon-CheckboxChecked-1' : 'icon-CheckboxChecked']"
                    ></span> 全选
                </div>
                <div @click="clearCart(shopId)">清空购物车</div>
            </div>
            <template v-for="item in cartList" :key="item.id">
                <div class="product_item" v-if="item.count > 0">
                    <div class="check">
                        <span
                            :class="['iconfont', item.isCheck ? 'icon-CheckboxChecked-1' : 'icon-CheckboxChecked']"
                            @click="handleChangeCheck(item, item.id)"
                        ></span>
                    </div>
                    <div class="imgbox">
                        <img src="http://www.dell-lee.com/imgs/vue3/near.png" />
                    </div>
                    <div class="rightInfo">
                        <div class="title">{{ item.title }}</div>
                        <div class="bottomfa">
                            <div class="priceBox">
                                <span class="nowPrice">&yen;{{ item.price }}</span>
                                <span class="prevPrice">{{ item.oldPrice }}</span>
                            </div>
                            <div class="action">
                                <div class="minus btn" @click="handleCart(item, shopId, -1)"></div>
                                <span>{{ item.count }}</span>
                                <div class="plus btn" @click="handleCart(item, shopId, 1)">+</div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
    <div class="cart">
        <div class="basket" @click="handleShow">
            <img src="../assets/basket.svg" />
            <span>{{ total.count }}</span>
        </div>
        <div class="total">
            总计：
            <span>&yen;{{ total.price }}</span>
        </div>
        <div class="pay" @click="gotoConfirm">去结算</div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from '@vue/reactivity';
import { useStore } from 'vuex'
import { useRoute ,useRouter} from 'vue-router';
import type { Good } from '../types/types'
import { computed, watchEffect } from '@vue/runtime-core';
import ShopItemVue from './ShopItem.vue';
const store = useStore()
const route = useRoute()
const router = useRouter()
const shopId = ref("" as any)
const state = reactive({
    cartList: {} as Record<string, any>
})
//全选
// const checkAll = ref(true)

const checkAll = computed(()=>{
    let currentShop = state.cartList
    let flag = true
    for(const key in currentShop){
        const p = currentShop[key]
        if(p.count>0&&!p.isCheck){
            flag =  false
        }
    }
    return flag
})
const handleCheckAll = (shopId:string | string[],checkAll:boolean)=>{
    store.commit("changeCheckAll",{shopId,checkAll})
}


const getCartList = () => {
    state.cartList = store.state?.cartList[shopId.value]?.productList
    // console.log("state.cartList",state.cartList);  
}
//计算购物车数量
const total = computed(() => {
    let currentShopId = shopId.value
    let currentShop = state.cartList
    let count: number = 0
    let price: any = 0
    // console.log("currentShopcurrentShop",currentShop);
    
    if (currentShop) {
        for (const key in currentShop) {
            const p = currentShop[key]
            // console.log("p",p);
            
            if (p.isCheck) {
                price += p.price * p.count
            }
            count += p.count
        }
    } else {
        count = 0
    }
    price = price.toFixed(2)
    return { count, price }
})
//加入购物车
const handleCart = (item: Good, shopId: string | string[], num: number) => {

    store.commit("changeCart", { item, shopId, num })
    getCartList()
}
//修改单选框
const handleChangeCheck = (item: Good, id: number) => {
    store.commit("changeCheck", { item, id })
}
watchEffect(() => {
    shopId.value = route.params.id
    getCartList()
})
//清空购物车
const clearCart = (shopId:string)=>{
    store.commit("clearCartList",{shopId})
}

//购物车列表隐藏展示
const maskShow = ref(false)
const cartListShow = ref(false)
const handleShow = ()=>{
    cartListShow.value = !cartListShow.value
    maskShow.value = !maskShow.value
}
//去确认订单
const gotoConfirm = () =>{
    router.push({name:'confirmOrder',params:{shopId:shopId.value}})
}
const { cartList } = toRefs(state)
</script>

<style scoped lang="scss">
    .mask{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: rgba(0,0,0,0.50);
        z-index: 1;
    }
.cart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    z-index: 2;
    background-color: #fff;
    .basket {
        width: 0.28rem;
        height: 0.26rem;
        position: relative;
        margin-left: 0.24rem;
        img {
            width: 100%;
            height: 100%;
        }
        span {
            position: absolute;
            left: 0.2rem;
            top: -0.14rem;
            padding: 0.04rem;
            min-width: 0.2rem;
            height: 0.2rem;
            font-size: 0.14rem;
            border-radius: 1rem;
            background-color: #e93b3b;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: scale(0.5);
            transform-origin: left center;
        }
    }
    .total {
        margin-left: 0.32rem;
        font-size: 0.12rem;
        color: #333333;
        span {
            font-size: 0.18rem;
            color: #e93b3b;
        }
    }
    .pay {
        width: 0.98rem;
        height: 100%;
        background-color: #4fb0f9;
        color: #fff;
        font-size: 0.14rem;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 0.5rem;
    }
}

.cartList {
    position: fixed;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2;
    max-height: 3rem;
    overflow-y: scroll;
    .product {
        flex: 1;
        margin: 0;
        overflow-y: scroll;
        height: 100%;
        .checkAll {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.16rem;
            color: #333333;
            font-size: 0.14rem;
            .checkAll_box {
                display: flex;
                align-items: center;
                span {
                    font-size: 0.2rem;
                    margin-right: .06rem;
                }
            }
        }
        .product_item {
            display: flex;
            padding: 0.16rem;
            margin-bottom: 0.12rem;
            border-bottom: 1px solid #f1f1f1;
            &:last-child {
                margin-bottom: 0;
            }
            .check {
                display: flex;
                align-items: center;
                color: #999;
                span {
                    font-size: 0.2rem;
                }
            }
            .imgbox {
                width: 0.46rem;
                height: 0.46rem;
                margin: 0 0.16rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .rightInfo {
                flex: 1;
                .title {
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 0.06rem;
                }
                .bottomfa {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .priceBox {
                        display: flex;
                        align-items: center;
                        .nowPrice {
                            font-size: 14px;
                            color: #e93b3b;
                            margin-right: 0.08rem;
                        }
                        .prevPrice {
                            font-size: 10px;
                            color: #999999;
                            text-decoration: line-through;
                        }
                    }
                    .action {
                        display: flex;
                        align-items: center;

                        .btn {
                            border-radius: 50%;
                            width: 0.2rem;
                            height: 0.2rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 0.2rem;
                            box-sizing: content-box;
                        }
                        .minus {
                            border: 1px solid #666666;
                            color: #666666;
                            &::after {
                                content: "";
                                border: 0.01rem solid #666;
                                width: 0.06rem;
                            }
                        }
                        span {
                            font-size: 14px;
                            color: #333333;
                            margin: 0 0.08rem;
                        }
                        .plus {
                            color: #fff;
                            background: #0091ff;
                        }
                    }
                }
            }
        }
    }
}
</style>